<template>
	<view class="u-page" style="padding-bottom: 120rpx;">
		<u-navbar leftIconColor="#fff" bgColor="#000" :titleStyle="{color:'#fff'}" :title="$t('navbar.step3')" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder>
			<!-- 			<view slot="right" @click="language">
				<u-icon name="setting" label="语言"></u-icon>
			</view> -->
		</u-navbar>
		<view class="u-demo-block">

			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form :labelStyle="{'color':'#fff'}" labelPosition="left" :model="form" ref="form1" labelWidth="150rpx" errorType="toast">
					<text class="u-demo-block__title color1">{{$t('add.name')}}</text>
					<view class="card">
						<u-form-item>
							<u--input v-model="form.name" :placeholder="$t('add.p4')" border="none"></u--input>
						</u-form-item>
					</view>
					<text class="u-demo-block__title color1 mt-30">{{$t('add.setting')}}</text>
					<view class="card">
						<u-form-item labelPosition="top" :label="$t('add.strength')" borderBottom>
							<view class="w-full">
								<u-slider activeColor="#f9ae3d" showValue min="1" max="10" v-model="form.strength"></u-slider>
							</view>
						</u-form-item>
						<u-form-item :label="$t('add.time1')" @click="e => selectPicker(1,e)" borderBottom>
							<u--input inputAlign="right" type="number" v-model="form.value1" :placeholder="$t('add.p1')"
								border="none"></u--input>
							<view slot="right" name="arrow-right" class="ml-10">分钟</view>
						</u-form-item>
						<u-form-item :label="$t('add.time2')" @click="e => selectPicker(2,e)" borderBottom>
							<u--input inputAlign="right" type="number" v-model="form.value2" :placeholder="$t('add.p2')"
								border="none"></u--input>
							<view slot="right" name="arrow-right" class="ml-10">分钟</view>
						</u-form-item>
						<u-form-item :label="$t('add.lighting')">
							<view class="w-full flex-row justify-end">
								<u-switch :activeColor="activeColor" v-model="form.lighting" size="20"></u-switch>
							</view>
						</u-form-item>
					</view>
					<text class="u-demo-block__title color1 mt-30">{{$t('add.make')}}</text>
					<view class="card">
						<u-form-item @click="e => selectBirthday(e,1)" :label="$t('add.power')" borderBottom>
							<u--input inputAlign="right" v-model="form.add1" :placeholder="$t('add.p3')"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right" class="ml-10"></u-icon>
						</u-form-item>
						<u-form-item @click="e => selectBirthday(e,2)" :label="$t('add.power')">
							<u--input inputAlign="right" v-model="form.add2" :placeholder="$t('add.p3')"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right" class="ml-10"></u-icon>
						</u-form-item>
					</view>
					<text class="u-demo-block__title color1" style="margin-top: 30rpx;">{{$t('add.repeat')}}</text>
					<view class="card">
						<u-form-item labelPosition="top" :label="$t('add.select')" prop="userInfo.name">
							<view class="flex-row flex-wrap"
								style="display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;">
								<!-- <u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
									@click="checkboxClick"  >
								</u-tag> -->
								<view @click="checkboxClick(index)" class="tag" :class="{'active' : item.checked}"
									v-for="(item, index) in checkboxs" :key="index">
									{{item.name}}
								</view>
							</view>
						</u-form-item>
					</view>
				</u--form>

				<u-picker :cancelText="$t('add.close')" :confirmText="$t('add.confirm')" :show="pickerShow"
					:columns="pickerColumns" @confirm="pickerConfirm"></u-picker>
				<u-datetime-picker :show="showBirthday" :value="value4" mode="time" closeOnClickOverlay
					@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>

			</view>
		</view>
		<view class="submit"
			style="background: #000;justify-content: space-between;padding: 30rpx;box-sizing: border-box;height: auto;">
			<u-button :text="$t('add.exit')" type="info" :customStyle="{'width':'48%'}"></u-button>
			<u-button @click="submit" :text="$t('add.save')" type="warning" :customStyle="{'width':'48%'}"></u-button>
		</view>
		<u-action-sheet :actions="actionList" :title="actionTitle" @select="actionSelect" :show="actionShow"
			@close="actionClose"></u-action-sheet>
	</view>
</template>

<script>
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				pickerShow: false,
				pickerColumns: [],
				columns1: [],
				columns2: [],
				columns3: [],
				type: 0,
				type1:0,
				checkboxs: [{
						name: this.$t('add.week1'),
						checked: true
					},
					{
						name: this.$t('add.week2'),
						checked: false
					},
					{
						name: this.$t('add.week3'),
						checked: false
					},
					{
						name: this.$t('add.week4'),
						checked: false
					},
					{
						name: this.$t('add.week5'),
						checked: false
					},
					{
						name: this.$t('add.week6'),
						checked: false
					},
					{
						name: this.$t('add.week0'),
						checked: false
					}
				],
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				value4: '05:28',
				showCalendar: false,
				showBirthday: false,
				form: {
					name: "",
					strength: 1,
					value1: "",
					value2: "",
					lighting: "",
					add1: "",
					add2: "",
					week: ""
				},
				model1: {
					userInfo: {
						name: '10',
						sex: '',
						birthday: '05:28',
					},
					radiovalue1: '苹果',
					checkboxValue1: [],
					intro: '',
					code: ''
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
				}
			}
		},
		watch: {
			actionShow: {
				handler(v1, v2) {
					this.checkboxs = [{
							name: this.$t('add.week1'),
							checked: true
						},
						{
							name: this.$t('add.week2'),
							checked: false
						},
						{
							name: this.$t('add.week3'),
							checked: false
						},
						{
							name: this.$t('add.week4'),
							checked: false
						},
						{
							name: this.$t('add.week5'),
							checked: false
						},
						{
							name: this.$t('add.week6'),
							checked: false
						},
						{
							name: this.$t('add.week0'),
							checked: false
						}
					]
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {
			for (var i = 1; i <= 10; i++) {
				this.columns1.push(0.5 * i)
			}
			for (var i = 1; i <= 30; i++) {
				this.columns2.push(1 * i)
			}
			for (var i = 1; i <= 4; i++) {
				this.columns3.push(0.5 * i)
			}

		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			selectPicker(type, e) {
				switch (type) {
					case 1:
						this.pickerColumns = [this.columns1]
						break;
					case 2:
						this.pickerColumns = [this.columns2]
						break;
					case 3:
						this.pickerColumns = [this.columns3]
						break;
				}

				this.type = type
				this.pickerShow = true
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			pickerConfirm(e) {
				switch (this.type) {
					case 1:
						this.form.value1 = e.value[0]
						break;
					case 2:
						this.form.value2 = e.value[0]
						break;
					case 3:
						this.form.value3 = e.value[0]
						break;
				}
				this.pickerShow = false
			},
			up() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectBirthday(e, type) {
				console.log(type);
				this.type1 = type
				this.showBirthday = true

			},
			birthdayClose() {
				this.showBirthday = false
			},
			birthdayConfirm(e) {
				console.log(e);
				if (this.type1 == 1) {
					this.form.add1 = e.value
				} else {
					this.form.add2 = e.value
				}

				this.showBirthday = false

			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>

<style lang="scss">
	/deep/uni-slider {
		margin: 0;
	}

	.tag {
		border-width: 1rpx;
		border-color: #fff;
		color: #000;
		width: 70rpx;
		padding: 10rpx 23rpx;
		text-align: center;
		background-color: #ecf5ff;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.tag.active {
		border-color: #f9ae3d;
		color: #fff;
		width: 70rpx;
		// padding: 10rpx 20rpx;
		background-color: #f9ae3d;
	}
</style>